<template>
  <div class="carousel-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <div class="carousel-track" :style="trackStyle">
      <div
          v-for="(item, index) in items"
          :key="index"
          :class="['carousel-slide', { active: currentIndex === index }]"
          :style="slideStyle(index)"
      >
        <img :src="item.image" alt="Slide" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'CarouselV2',
  data() {
    return {
      items: [
        { image: require('@/assets/temp/11.png') },
        { image: require('@/assets/temp/12.png')},
        { image: require('@/assets/temp/13.png') },
        // ... Add more images
      ],
      currentIndex: 0,
      startX: 0,
      offset: 0,
    };
  },
  computed: {
    trackStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 100}%) translateX(${this.offset}px)`,
      };
    },
  },
  methods: {
    onTouchStart(event) {
      this.startX = event.touches[0].clientX;
    },
    onTouchMove(event) {
      const currentX = event.touches[0].clientX;
      this.offset = currentX - this.startX;
    },
    onTouchEnd() {
      if (this.offset > 50 && this.currentIndex > 0) {
        this.currentIndex--;
      } else if (this.offset < -50 && this.currentIndex < this.items.length - 1) {
        this.currentIndex++;
      }
      this.offset = 0;
    },
    slideStyle(index) {
      const distance = Math.abs(index - this.currentIndex) * 100 + this.offset;
      const scaleFactor = 1 - distance * 0.005;
      const translate = distance * 0.2;

      return {
        transform: `scale(${scaleFactor}) translateX(${translate}px)`,
        zIndex: 100 - Math.abs(index - this.currentIndex),
      };
    },
  },
};
</script>

<style scoped>
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.carousel-slide {
  flex: 0 0 33.33%; /* Display three slides at a time */
  transition: transform 0.3s ease-in-out, z-index 0.3s;
  position: relative;
  cursor: pointer;
}

.carousel-slide img {
  width: 100%;
  height: auto;
}

.active {
  transform: scale(1.5) !important;
  z-index: 3 !important;
}
</style>
